---
{
	"title": "Fils de syndication",
	"language": "fr",
	"category": "Plugiciels",
	"categoryfile": "plugins",
	"description": "Affiche les articles d’un ou plus fils de syndication.",
	"altLangPrefix": "feeds",
	"dateModified": "2015-03-19"
}
---
<span class="wb-prettify all-pre hide"></span>

<div>

<section>
	<h2>But</h2>
	<p>Cette composante est un gadget logiciel permettant de regrouper et d’afficher des données d'un ou plusieurs fils de syndication. Les formats soutenus sont Atom, RSS et Media RSS.</p>
</section>

<section>
	<h2>Utiliser lors</h2>
	<ul>
		<li>de la promotion et le partage d'information de fils de syndication sur une page Web </li>
	</ul>
</section>

<section>
	<h2>Exemples</h2>
	<ul>
		<li><a href="../../../demos/feeds/feeds-en.html">Exemple anglais</a></li>
		<li><a href="../../../demos/feeds/feeds-fr.html">Exemple français</a></li>
	</ul>
</section>

<section>
	<h2>Évaluation et rapport</h2>
	<ul>
		<li>Accessibilité (CS WCAG 2.1/2.2 Niveau A &amp; AA)- <a href="../../../demos/feeds/reports/a11y-1-en.html">Rapport Anglais</a></li>
		<li>Accessibilité (CS WCAG 2.1/2.2 Niveau A &amp; AA)- <a href="../../../demos/feeds/reports/a11y-1-fr.html">Rapport Français</a></li>
	</ul>
</section>

<section>
	<h2>Comment implémenter</h2>
	<ol>
		<li>Pour chaque zone qui affiche des fils de syndication, créer un élément <code>section</code> avec <code>class="wb-feeds"</code>.
			<pre><code>&lt;section class="wb-feeds"&gt;&lt;/section&gt;</code></pre>
		</li>
		<li>Dans l'élément <code>section</code>, ajouter une entête (<code>h1</code> - <code>h6</code>).</li>
		<li>Ajouter une liste non-ordonnée (<code>ul</code>) après l'entête avec la classe <code>feeds-cont</code>.
			<ul>
				<li><strong>Fils de syndication Flickr et YouTube :</strong>
					<ol>
						<li>Ajouter la classe <code>list-inline</code> à la liste non-ordonnée.</li>
						<li>Ajouter <code>&lt;div class="clearfix"&gt;&lt;/div&gt;</code> après la liste non-ordonnée.</li>
					</ol>
				</li>
			</ul>
		</li>
		<li>Pour chaque source de fil de syndication à afficher, ajouter un élément de liste contenant un lien vers le fil.
			<ul>
				<li><strong>Fils de syndication ordinaires :</strong>
					<pre><code>&lt;li&gt;
	&lt;a href="https://canada.ca/sample.atom"&gt;Exemple de flux Atom&lt;/a&gt;
&lt;/li&gt;</code></pre>
				</li>
				<li><strong>Fils de syndication Flickr :</strong>
					<ol>
						<li>L'attribut <code>href</code> du lien doit contenir l'URL du fil-photo du compte Flickr.</li>
						<li>Ajouter l'attribut <code>data-ajax</code> au lien contenant l'URL du <a href="https://www.flickr.com/services/feeds/">fil JSON du compte Flickr (en anglais seulement)</a>.</li>
					</ol>
					<pre><code>&lt;li&gt;
	&lt;a href="https://www.flickr.com/photos/environmentcan" rel="external" data-ajax="https://api.flickr.com/services/feeds/photos_public.gne?id=47721741@N05&amp;format=json"&gt;Flickr d'Environnement Canada&lt;/a&gt;
&lt;/li&gt;</code></pre>
				</li>
				<li><strong>Fils de syndication YouTube :</strong>
					<ol>
						<li>L'attribut <code>href</code> du lien doit contenir l'URL du compte YouTube.</li>
						<li>Ajouter l'attribut <code>data-ajax</code> au lien contenant l'URL du fil JSON du compte YouTube.</li>
					</ol>
					<pre><code>&lt;li&gt;
	&lt;a href="https://www.youtube.com/user/ParksCanadaAgency" rel="external" data-ajax="https://gdata.youtube.com/feeds/api/users/UCr23fllByMomgNGeShe-73g/uploads?v=2&amp;alt=json"&gt;YouTube de Parcs Canada&lt;/a&gt;
&lt;/li&gt;</code></pre>
				</li>
			</ul>
		</li>
		<li><strong>Facultatif :</strong> Regrouper plusieurs types de fils de syndication dans une interface à onglets. L'avantage de cette approche est qu'elle ne charge que les fils qui sont actuellement visibles (ce qui améliore considérablement la performance lorsqu'il y a beaucoup d'éléments).
			<ol>
				<li>Créer un élément <code>div</code> avec la classe <code>class="wb-tabs"</code>.</li>
				<li>Ajouter un élément <code>div</code>avec <code>class="tabpanels"</code> à l'intérieur de l'élément <code>div</code> précédent.</li>
				<li>Pour chaque groupe de flux (regrouper les fils par type), ajouter un élément <code>details</code>. Ajouter l'attribut <code>open="open"</code> au groupe de fils qui doit être affiché par défaut.</li>
				<li>Ajouter un élément <code>summary</code> au début de chaque élément <code>details</code> avec le nom du groupe de fils (e.g., <code>&lt;summary&gt;Pinterest&lt;/summary&gt;</code>).</li>
				<li>Ajouter les zonnes pour afficher les flux Web après chaque élément <code>summary</code> tel que décrit aux étapes 1 à 4, mais avec l'exception d'ajouter la classe <code>wb-inv</code> à l'entête de chaque zone.</li>
			</ol>
			<pre><code>&lt;section&gt;
	&lt;h3&gt;Les comptes des médias sociaux à onglets&lt;/h3&gt;
	&lt;div class="wb-tabs col-md-5 wb-eqht"&gt;
		&lt;div class="tabpanels"&gt;
			&lt;details id="details-pinterest" open="open"&gt;
				&lt;summary&gt;Pinterest&lt;/summary&gt;
				&lt;section class="wb-feeds limit-5"&gt;
					&lt;h4 class="wb-inv"&gt;Pinterest&lt;/h4&gt;
					&lt;ul class="feeds-cont media-list"&gt;
						...
					&lt;/ul&gt;
					&lt;div class="clearfix"&gt;&lt;/div&gt;
				&lt;/section&gt;
			&lt;/details&gt;

			&lt;details id="details-flickr"&gt;
				&lt;summary&gt;Flickr&lt;/summary&gt;
				&lt;section class="wb-feeds limit-10"&gt;
					&lt;h4 class="wb-inv"&gt;Flickr&lt;/h4&gt;
					&lt;ul class="feeds-cont list-inline"&gt;
						...
					&lt;/ul&gt;
					&lt;div class="clearfix"&gt;&lt;/div&gt;
				&lt;/section&gt;
			&lt;/details&gt;

			&lt;details id="details-youtube"&gt;
				&lt;summary&gt;YouTube&lt;/summary&gt;
				&lt;section class="wb-feeds limit-10"&gt;
					&lt;h4 class="wb-inv"&gt;YouTube&lt;/h4&gt;
					&lt;ul class="feeds-cont list-inline"&gt;
						...
					&lt;/ul&gt;
					&lt;div class="clearfix"&gt;&lt;/div&gt;
				&lt;/section&gt;
			&lt;/details&gt;
		&lt;/div&gt;
	&lt;/div&gt;
	&lt;div class="clearfix"&gt;&lt;/div&gt;
&lt;/section&gt;</code></pre>
		</li>
	</ol>

	<section>
		<h3>Exemples de code</h3>
		<section>
			<h4>Fils de syndication ordinaires</h4>
			<pre><code>&lt;section class="wb-feeds limit-5"&gt;
	&lt;h3&gt;Communiqués de presse et rappels de la sécurité routière&lt;/h3&gt;
	&lt;ul class="feeds-cont"&gt;
		&lt;li&gt;
			&lt;a href="https://www.tc.gc.ca/medias/rss/routier.xml" rel="external"&gt;Communiqués de presse routière (Tous)&lt;/a&gt;
		&lt;/li&gt;
		&lt;li&gt;
			&lt;a href="https://wwwapps.tc.gc.ca/Saf-Sec-Sur/7/VRDB-BDRV/search-recherche/rss.aspx?lang=fra" rel="external"&gt;Rappels de la Sécurité Routière&lt;/a&gt;
		&lt;/li&gt;
	&lt;/ul&gt;
&lt;/section&gt;</code></pre>
		</section>

		<section>
			<h4>Fils de syndication Flickr</h4>
			<pre><code>&lt;section class="wb-feeds limit-15"&gt;
	&lt;ul class="feeds-cont list-inline"&gt;
		&lt;li&gt;
			&lt;a href="https://www.flickr.com/photos/environnementcan" rel="external" data-ajax="https://api.flickr.com/services/feeds/photos_public.gne?id=47721741@N05&amp;format=json"&gt;Flickr d'Environnement Canada&lt;/a&gt;
		&lt;/li&gt;
	&lt;/ul&gt;
	&lt;div class="clearfix"&gt;&lt;/div&gt;
&lt;/section&gt;</code></pre>
		</section>

		<section>
			<h4>Fils de syndication YouTube</h4>
			<pre><code>&lt;section class="wb-feeds limit-15"&gt;
	&lt;ul class="feeds-cont list-inline"&gt;
		&lt;li&gt;
			&lt;a href="https://www.youtube.com/user/ParksCanadaAgency" rel="external" data-ajax="https://gdata.youtube.com/feeds/api/users/UCr23fllByMomgNGeShe-73g/uploads?v=2&amp;alt=json"&gt;YouTube de Parcs Canada&lt;/a&gt;
		&lt;/li&gt;
		&lt;li&gt;
			&lt;a href="https://www.youtube.com/user/fisheriescanada?feature=results_main" rel="external" data-ajax="https://gdata.youtube.com/feeds/api/users/UCf1JLCB96nHLjidhSJtHDFA/uploads?v=2&amp;alt=json"&gt;YouTube de Pêches et Océans Canada&lt;/a&gt;
		&lt;/li&gt;
	&lt;/ul&gt;
	&lt;div class="clearfix"&gt;&lt;/div&gt;
&lt;/section&gt;</code></pre>
		</section>

		<section>
			<h4>Les comptes des médias sociaux à onglets</h4>
			<pre><code>&lt;section&gt;
	&lt;h3&gt;Les comptes des médias sociaux à onglets&lt;/h3&gt;
	&lt;div class="wb-tabs col-md-5 wb-eqht"&gt;
		&lt;div class="tabpanels"&gt;

		&lt;details id="details-flickr"&gt;
				&lt;summary&gt;Flickr&lt;/summary&gt;
				&lt;section class="wb-feeds limit-10"&gt;
					&lt;h4 class="wb-inv"&gt;Flickr&lt;/h4&gt;
					&lt;ul class="feeds-cont list-inline"&gt;
						&lt;li&gt;
							&lt;a href="https://www.flickr.com/photos/environnementcan" rel="external" data-ajax="https://api.flickr.com/services/feeds/photos_public.gne?id=47721741@N05&amp;format=json"&gt;Flickr d'Environnement Canada&lt;/a&gt;
						&lt;/li&gt;
					&lt;/ul&gt;
					&lt;div class="clearfix"&gt;&lt;/div&gt;
				&lt;/section&gt;
			&lt;/details&gt;

			&lt;details id="details-youtube"&gt;
				&lt;summary&gt;YouTube&lt;/summary&gt;
				&lt;section class="wb-feeds limit-10"&gt;
					&lt;h4 class="wb-inv"&gt;YouTube&lt;/h4&gt;
					&lt;ul class="feeds-cont list-inline"&gt;
						&lt;li&gt;
							&lt;a href="https://www.youtube.com/user/ParksCanadaAgency" rel="external" data-ajax="https://gdata.youtube.com/feeds/api/users/UCr23fllByMomgNGeShe-73g/uploads?v=2&amp;alt=json"&gt;YouTube de Parcs Canada&lt;/a&gt;
						&lt;/li&gt;
						&lt;li&gt;
							&lt;a href="https://www.youtube.com/user/fisheriescanada?feature=results_main" rel="external" data-ajax="https://gdata.youtube.com/feeds/api/users/UCf1JLCB96nHLjidhSJtHDFA/uploads?v=2&amp;alt=json"&gt;YouTube de Pêches et Océans Canada&lt;/a&gt;
						&lt;/li&gt;
					&lt;/ul&gt;
					&lt;div class="clearfix"&gt;&lt;/div&gt;
				&lt;/section&gt;
			&lt;/details&gt;
		&lt;/div&gt;
	&lt;/div&gt;
	&lt;div class="clearfix"&gt;&lt;/div&gt;
&lt;/section&gt;</code></pre>
		</section>
	</section>
</section>

<section lang="en">
	<h3 id="json-atom-like-feed">Converting ATOM XML feed into JSON ATOM like format</h3>
	<p>Here is the skeleton structure for the feed:</p>

	<pre><code>{
	"feed": {
		"entry": [
			{
				"title": "[Title of the entry]",
				"updated": "[UTC date format]",
				"link": "[URL]"
			},

			...
		]
	}
}</code></pre>
	<p>Notes:</p>
	<ul>
		<li>Replace <code>...</code> in each entry and remove the ending comas for the least entry.</li>
		<li>The Feed plugin would ignore any meta information added to describe the feed. However we recommend that your feed contains self-describing information.</li>
	</ul>

	<p>Alias for "Publication date" of each entry:</p>
	<ul>
		<li><code>publishedDate</code></li>
		<li><code>published</code></li>
		<li><code>pubDate</code></li>
		<li><code>updated</code></li>
	</ul>
	<p>Alias for "Link" of each entry:</p>
	<ul>
		<li><code>link</code></li>
		<li><code>href</code></li>
	</ul>
</section>

<section>
	<h2>Options de configuration</h2>
	<p>Documente les options de configuration publiques qui peuvent être utilisées par les intégrateurs ou les développeurs.</p>
	<table class="table">
		<thead>
			<tr>
				<th>Option</th>
				<th>Description</th>
				<th>Comment configurer</th>
				<th>Valeurs</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td><code>limit-x</code></td>
				<td>Contrôle le nombre d'items du fil de syndication que le widget affichera.</td>
				<td>Ajouter la classe <code>limit-x</code> après la classe <code>wb-feeds</code> et remplacer <code>x</code> avec nombre entier.</td>
				<td>
					<dl>
						<dt>défaut (non spécifié)</dt>
						<dd>Affiche toutes les entrées du fil de syndication</dd>
						<dt><code>limit-4</code>:</dt>
						<dd>Limite l'affichage à quatre items.</dd>
					</dl>
				</td>
			</tr>
			<tr>
				<td><code>data-cors="true"</code></td>
				<td>Permet des requêtes inter-sites (CORS) afin d’obtenir le fil de syndication ATOM sans à devoir utiliser le service web de Yahoo.</td>
				<td>Ajouter l’attribut <code>data-cors="true"</code></td>
				<td>
					<dl>
						<dt>non-définie (défaut)</dt>
						<dd>Utilise le service web de Yahoo </dd>
						<dt><code>true</code></dt>
						<dd>Obtient directement le fil de syndication ATOM </dd>
						</dl>
				</td>
			</tr>
		</tbody>
	</table>
</section>

<section>
	<h2>Événements</h2>
	<p>Documente les événements publics qui peuvent être utilisés par les intégrateurs ou les développeurs .</p>
	<table class="table">
		<thead>
			<tr>
				<th>Événement</th>
				<th>Déclencheur</th>
				<th>Ce qu'il fait</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td><code>wb-init.wb-feeds</code></td>
				<td>Déclenché manuellement (e.g., <code>$( ".wb-feeds" ).trigger( "wb-init.wb-feeds" );</code>).</td>
				<td>Utilisé pour initialiser manuellement le widget de fils de syndication. <strong>Note:</strong> Le widget de fils de syndication sera initialisé automatiquement à moins qu'il soit ajouté après le chargement initial de la page.</td>
			</tr>
			<tr>
				<td><code>wb-ready.wb-feeds</code> (v4.0.5+)</td>
				<td>Déclenché automatiquement après que le plugiciel de fils de syndication ait été initialisé.</td>
				<td>Utilisé pour identifier où le plugiciel a fini d'être initialisé (cible de l'événement).
					<pre><code>$( document ).on( "wb-ready.wb-feeds", ".wb-feeds", function( event ) {
});</code></pre>
					<pre><code>$( ".wb-feeds" ).on( "wb-ready.wb-feeds", function( event ) {
});</code></pre>
				</td>
			</tr>
			<tr>
				<td><code>wb-feed-ready.wb-feeds</code> (v4.0.5+)</td>
				<td>Déclenché automatiquement après que le fil de syndication soit devenu visible.</td>
				<td>Utilisé pour identifier quel fil est devenu visible (cible de l'événement).
					<pre><code>$( document ).on( "wb-feed-ready.wb-feeds", ".wb-feeds .feeds-cont", function( event ) {
});</code></pre>
					<pre><code>$( ".wb-feeds .feeds-cont" ).on( "wb-feed-ready.wb-feeds", function( event ) {
});</code></pre>
				</td>
			</tr>
			<tr>
				<td><code>wb-ready.wb</code> (v4.0.5+)</td>
				<td>Déclenché automatiquement lorsque BOEW a terminé son chargement et son exécution.</td>
				<td>Utilisé pour identifier quand tous les plugiciels BOEW et les correctifs ont terminé leur chargement et leur exécution.
					<pre><code>$( document ).on( "wb-ready.wb", function( event ) {
});</code></pre>
				</td>
			</tr>
		</tbody>
	</table>
</section>

<section>
	<h2>Code source</h2>
	<p><a href="https://github.com/wet-boew/wet-boew/tree/master/src/plugins/feeds">Code source du widget de fils de syndications sur GitHub</a></p>
</section>
</div>
